<template>
  <div class="classify clear">
    <div class="list-left">
      <div class="item" :class="(is_check == '1') ?'active' : ''" @click="checkFn(1)">魔方精灵</div>
      <div class="item" :class="(is_check == '2') ?'active' : ''" @click="checkFn(2)">学霸学吧</div>
      <div class="item" :class="(is_check == '3') ?'active' : ''" @click="checkFn(3)">社交达人</div>
    </div>
    <div class="cons-right">
      <img src="@/assets/fenlei01.png" alt="">
      <p class="title">全部类别</p>
      <div class="classify-list">
        <span @click="router({path: './courseList'})">初级</span>
        <span>中级</span>
        <span>高级</span>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    components: {
    },
    data () {
      return {
        is_check: 0
      }
    },
    created () {
      this.is_check = (this.$route.query.columId) ? this.$route.query.columId : 1      
    },
    methods: {
      checkFn (index) {
        this.is_check = index
      },
      router (path) {
        this.$router.push(path)
      },
    }
  }
</script>

<style lang="stylus" scoped>
.classify
  width 100%
  height 100vh
  overflow hidden
  background-color #fff
  .list-left
    background-color #f8f8f8
    height 100%
    width 8.5rem
    float left
    .item.active
      color #172F6D
      background-color #fff
    .item
      color #666666
      font-size 1.5rem
      line-height 6rem
      text-align center
  .cons-right
    background-color #fff
    width calc(100% - 8.5rem)
    height 100%
    float left
    padding 2.3rem 1rem
    box-sizing border-box
    .title
      font-size 1.5rem
      color #000
      font-weight 500
      line-height 1.5rem
      height 1.5rem
      margin-top 2.5rem
      margin-bottom 1.5rem
      overflow hidden
    .classify-list
      span
        float left
        width calc(33.3% - .7rem)
        text-align center
        height 3.2rem
        line-height 3.2rem
        border 1px solid #ccc
        color #333
        font-size 1.2rem
        box-sizing border-box        
        font-weight 500
        &:nth-child(3n+2)
          margin 0 1.05rem
</style>
